<template>
  <div class="container-fluid m-0 p-0" :class="[vdata.onpc?'inv-pc':'inv-ph']">
    <van-tabs type="card" background="black" color="green" sticky>
      <van-tab title="实装">
        <table class="table table-bordered table-sm table-dark m-0 p-0">
          <thead>
            <tr>
              <th v-for="(title) of this.titlewear" :key=title>{{title}}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, itemidx) of dictwear" :key=itemidx class="m-0 p-0">
              <td>{{item.posname}}</td>
              <td>
                <el-select v-model="item.equipname" class="m-0 p-0" style='height:30px;width:100%' @change=onequipchange($event)>
                  <el-option v-for="equipselect in item.listitem" :key="equipselect.value" :label="equipselect.label" :value="equipselect"></el-option>
                </el-select>
              </td>
            </tr>
          </tbody>
        </table>
      </van-tab>
      <van-tab title="装备">
        <div class="container-fluid m-1 p-1">
          <a class="dropdown" v-for="(item, itemidx) of dictequip" :key=itemidx>
            <a :class=item.class href="#" role="button" id="dropdownMenuItem" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{item.sname}}</a>
            <div class="dropdown-menu invactitem" aria-labelledby="dropdownMenuItem">
              <button class="dropdown-item thing-act-button" type="button" v-for="(act, actidx) of item.acts" :key=actidx :value="[item.Uid, act.act]" @click="onequipact($event)">{{act.text}}</button>
            </div>
          </a>
        </div>
      </van-tab>
      <van-tab title="道具">
        <div class="container-fluid m-1 p-1">
          <a class="dropdown" v-for="(item, itemidx) of dictitem" :key=itemidx>
            <a :class=item.class href="#" role="button" id="dropdownMenuItem" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{item.sname}}</a>
            <div class="dropdown-menu invactitem" aria-labelledby="dropdownMenuItem">
              <button class="dropdown-item thing-act-button" type="button" v-for="(act, actidx) of item.acts" :key=actidx :value="[item.ConfigId, act.act]" @click="onitemact($event)">{{act.text}}</button>
            </div>
          </a>
        </div>
      </van-tab>
    </van-tabs>
    <button type="button" class="btn btn-info btn-block" v-on:click="onclose">关闭</button>
  </div>
</template>

<script>
/* eslint-disable comma-dangle */
export default {
  data: function () {
    return {
      vdata: this.gdata.data,
      dictwear: {},
      dictitem: {},
      dictequip: {},
      titlewear: ['部位', '装备'],
    }
  },
  components: {
  },
  computed: {
  },
  methods: {
    updatewears: function (DictWear) {
      for (let pos in this.confem.confemmEquipType) {
        let wear = {
          pos: pos,
          id: 0,
          posname: this.confem.confemmEquipType[pos],
          equipname: '无',
          listitem: [{ value: 0, label: '无', pos: pos }]
        }
        this.dictwear[pos] = wear
      }
      for (let pos in DictWear) {
        let id = DictWear[pos]
        this.dictwear[pos].id = id
        this.dictwear[pos].equipname = this.dictequip[id].Name
      }
      for (let id in this.dictequip) {
        let equip = this.dictequip[id]
        let pos = this.conf.ConfigEquip[equip.ConfigId].EquipType
        this.dictwear[pos].listitem.push({ value: id, label: equip.Name, pos: pos })
      }
    },
    updateequips: function (DictEquip) {
      this.dictequip = DictEquip
      for (var id in this.dictequip) {
        var equip = this.dictequip[id]
        this.updateequip(equip, false)
      }
    },
    updateequip: function (equip, update) {
      equip.acts = [
        { act: 'look', text: '查看' },
        { act: 'drop', text: '丢弃' },
      ]
      if (equip.Wear) {
        equip.acts.push({ act: 'remove', text: '卸下' })
        equip.sname = equip.Name + '✔'
        equip.class = (this.vdata.onpc ? 'btninvitem' : 'btninvitem-ph') + ' btn btn-info btn-lg p-0 dropdown-toggle'
      } else {
        equip.acts.push({ act: 'wear', text: '装备' })
        equip.sname = equip.Name
        equip.class = (this.vdata.onpc ? 'btninvitem' : 'btninvitem-ph') + ' btn btn-success btn-lg p-0 dropdown-toggle'
      }
      if (update) {
        this.dictequip[equip.Uid] = equip
      }
    },
    onequipact: function (event) {
      var listval = event.srcElement.value.split(',')
      var id = listval[0]
      var act = listval[1]
      switch (act) {
        case 'look': {
          let reqinfo = this.wsreq('C2G_EQUIP_INFOINV')
          reqinfo.Uid = id
          this.wssend(reqinfo)
          break
        }
        case 'drop': {
          let reqinfo = this.wsreq('C2G_EQUIP_DROP')
          reqinfo.Uid = id
          this.wssend(reqinfo)
          break
        }
        case 'wear': {
          let reqinfo = this.wsreq('C2G_EQUIP_WEAR')
          reqinfo.Uid = id
          this.wssend(reqinfo)
          break
        }
        case 'remove': {
          let reqinfo = this.wsreq('C2G_EQUIP_UNWEAR')
          reqinfo.Uid = id
          this.wssend(reqinfo)
          break
        }
        default:
          break
      }
    },
    onequipchange: function (event) {
      let reqinfo = this.wsreq('C2G_EQUIP_CHANGE')
      reqinfo.Type = event.pos
      reqinfo.Uid = event.value
      this.wssend(reqinfo)
    },
    updateitems: function (DictItem) {
      this.dictitem = DictItem
      for (var id in this.dictitem) {
        var item = this.dictitem[id]
        var count = item.Count
        var cfg = this.conf.ConfigItem[item.ConfigId]
        item.sname = count + cfg.Unit + cfg.Name
        item.acts = [
          { act: 'look', text: '查看' },
          { act: 'drop', text: '丢弃一个' },
          { act: 'dropall', text: '丢弃全部' },
        ]
        if (cfg.UseCan) {
          item.acts.push({ act: 'use', text: '使用' })
        }
        item.class = (this.vdata.onpc ? 'btninvitem' : 'btninvitem-ph') + ' btn btn-success btn-lg p-0 dropdown-toggle'
      }
    },
    onitemact: function (event) {
      var listval = event.srcElement.value.split(',')
      var id = listval[0]
      var act = listval[1]
      switch (act) {
        case 'look': {
          let cfg = this.conf.ConfigItem[id]
          let desc = cfg.Desc
          this.jxwdtextmud(desc)
          break
        }
        case 'drop': {
          let reqinfo = this.wsreq('C2G_ITEM_DROP')
          reqinfo.ConfigId = id
          reqinfo.Amount = 1
          this.wssend(reqinfo)
          break
        }
        case 'dropall': {
          let reqinfo = this.wsreq('C2G_ITEM_DROP')
          reqinfo.ConfigId = id
          reqinfo.Amount = 999999
          this.wssend(reqinfo)
          break
        }
        case 'use': {
          let reqinfo = this.wsreq('C2G_ITEM_USE')
          reqinfo.ConfigId = id
          this.wssend(reqinfo)
          break
        }
        default:
          break
      }
    },
    onclose: function (event) {
      this.$parent.vclose()
    },
    G2C: function (pid, rsp, success, result) {
      switch (pid) {
        case 'G2C_CHAR_INV':
          this.updateitems(rsp.DictItem)
          this.updateequips(rsp.DictEquip)
          this.updatewears(rsp.DictWear)
          break
        case 'G2C_ITEM_DROP':
        case 'G2C_ITEM_USE':
          this.updateitems(rsp.DictItem)
          break
        case 'G2C_EQUIP_DROP':
        case 'G2C_EQUIP_WEAR':
        case 'G2C_EQUIP_CHANGE':
        case 'G2C_EQUIP_UNWEAR':
          this.updateequips(rsp.DictEquip)
          this.updatewears(rsp.DictWear)
          break
        default:
          // 这里是没有找到对应的值处理
          break
      }
    }
  },
}
</script>

<style scoped>
.inv-pc {
  font-size: 15px;
}
.inv-ph {
  font-size: 10px;
  margin: 0px;
  padding: 0px;
}
.btninvitem {
  white-space: normal;
  margin: 1px;
  font-size: 20px;
}
.btninvitem-ph {
  white-space: normal;
  margin: 1px;
  font-size: 15px;
}
.invactitem {
  background: Orange;
}
</style>
